<template>
    <div class="contenter dayReport1">
        <div class="center fontSize16 mt20 mb20">
            <span class="fontSize14 colorOrange"> < {{brandName}} > </span>
            <span class="fontbold">{{nowDate}}{{areaId==20?'线上':'门店'}}报表</span>
        </div>
        <div class="mb20" style="position: sticky;top: 0;">
            <van-dropdown-menu active-color="#4873c1">
                <!-- <van-dropdown-item v-model="brandVal" :options="brandList" @change='getChangeDrop' /> -->
                <!-- <van-dropdown-item  v-model="dateVal" @open='goOpen' :options="dateList" ref="item">
                </van-dropdown-item> -->

                <van-dropdown-item v-model="typeVal" @change='getType' :options="option" ref="item">
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <div class="mainContent nowrap contentlayout wd100 fontSize0" v-if="reportList.length>0">
                <!-- <div class="title flex flexCenter alignCenter fontSize16 fontbold">{{item.name}}</div> -->
                <!--销售表头-->
                <!-- <div class="flex alignCenter  subTitle colorfff fontSize12 flexCenter" v-if="typeVal==1">
                    <div class="flex1 flex flexCenter alignCenter">区域名称</div>
                    <div class="w14 flex flexCenter alignCenter" :class="{'w17':areaId==20}" @click="goSort(daySort,'thisDaySales')">当天销售额(元)</div>
                    <div class="w14 flex flexCenter alignCenter" :class="{'w17':areaId==20}" @click="goSort(monthSort,'thisMonthSales')">月累计销售额(元)</div>
                    <div class="w1 flex flexCenter alignCenter" v-if="areaId==20" @click="goSort(netSalesSort,'thisNetSales')">当天净销额(元)</div>
                    <div class="w1 flex flexCenter center alignCenter" @click="goSort(monthLiftSort,'thisMonthLiftRate')">月累计同期提升比</div>
                    <div class="w1 flex flexCenter alignCenter" v-if="areaId!=20">预售(元)</div>
                </div> -->
                <div class="flex alignCenter  subTitle colorfff fontSize12 flexCenter" style="display:block" v-if="typeVal==1">
                    <div class="disInline w20 center">区域名称</div>
                    <div class="disInline w20 center" @click="goSort(netSalesSort,'thisNetSales')" v-if="areaId==20">
                        当天净销额(万)
                    </div>
                    <div class="disInline w20 center" @click="goSort(daySort,'thisDaySales')">
                        当天销售额(元)
                    </div>
                    
                    <div class="disInline w20 center tableTitleBgcolor" @click="goSort(monthSort,'thisMonthSales')">
                        月累销售额(元)
                    </div>
                    
                    <div class="disInline w20 center" style="background-color: #85aaee" @click="goSort(monthSort,'lastYearThisMonthSales')">
                        同期月累销售额(元)
                    </div>
                    <div class="disInline w20 center" style="background-color: #85aaee" @click="goSort(monthLiftSort,'thisMonthLiftRate')">
                       月累同期提升比
                    </div>
                    <div class="disInline w20 center"  v-if="areaId!=20" style="background-color: #85aaee">
                        预售
                    </div>
                </div>
                <!--vip表头-->
                <div class="flex alignCenter subTitle colorfff fontSize13" v-if="typeVal==2">
                    <div class="flex1 flex flexCenter alignCenter">区域名称</div>
                    <div class="w24 flex flexCenter alignCenter">月累消费人数</div>
                    <div class="w24 flex flexCenter alignCenter">年累消费人数</div>
                </div>
                <!--销售列表-->
                <!-- <div class="reportListContent fontSize12" v-if="typeVal==1">
                    <div class="flex flexBetween flexCenter" v-for="(item,index) in reportList" :key="index">
                        <div class="flex1 borderGray regionName flex flexCenter alignCenter fontSize13 center">{{item.name}}</div>
                        
                        <div class="w14 borderGray flex flexCenter alignCenter" :class="{'w17':areaId==20}">{{item.thisDaySales}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter" :class="{'w17':areaId==20}">{{item.thisMonthSales}}</div>
                        <div class="w1 borderGray flex flexCenter alignCenter" v-if="areaId==20">{{item.thisNetSales}}</div>
                        <div class="w1 borderGray flex flexCenter alignCenter" :class="{'colorGreen':item.thisMonthLiftRate<0,'colorRed':item.thisMonthLiftRate > 0}">{{item.thisMonthLiftRateText===''?'-':item.thisMonthLiftRateText}}</div>
                        <div v-if="areaId!=20" class="w1 borderGray flex flexCenter alignCenter">{{item.thisDayPreSales}}</div>
                    </div>
                </div> -->
                <div class="reportListContent fontSize12 disInline" v-if="typeVal==1">
                    <div class="flex flexBetween flexCenter" v-for="(item,index) in reportList" :key="index">
                        <div class="w20 borderGray regionName flex flexCenter alignCenter fontSize13 center">{{item.name}}</div>
                        <div class="w20 borderGray flex flexCenter alignCenter" v-if="areaId==20">{{item.thisNetSales}}</div>
                        <div class="w20 borderGray flex flexCenter alignCenter">{{item.thisDaySales}}</div>
                        <div class="w20 borderGray flex flexCenter alignCenter">{{item.thisMonthSales}}</div>
                        <div class="w20 borderGray flex flexCenter alignCenter" >{{item.lastYearThisMonthSales}}</div>
                        <div class="w20 borderGray flex flexCenter alignCenter" :class="{'colorGreen':item.thisMonthLiftRate<0,'colorRed':item.thisMonthLiftRate > 0}">{{item.thisMonthLiftRateText===''?'-':item.thisMonthLiftRateText}}</div>
                        <div v-if="areaId!=20" class="w20 borderGray flex flexCenter alignCenter">{{item.thisDayPreSales}}</div>
                    </div>
                </div>
                <!--销售小计-->
                <!-- <div class="flex flexBetween flexCenter colorBlue fontbold fontSize13" v-if="typeVal==1">
                    <div class="flex1 borderGray regionName flex flexCenter alignCenter">{{subTotal.name}}</div>
                    
                    <div class="w14 borderGray flex flexCenter alignCenter" :class="{'w17':areaId==20}">{{subTotal.thisDaySales}}</div>
                    <div class="w14 borderGray flex flexCenter alignCenter" :class="{'w17':areaId==20}">{{subTotal.thisMonthSales}}</div>
                    <div class="w1 borderGray flex flexCenter alignCenter" v-if='areaId==20'>{{subTotal.thisNetSales}}</div>
                    <div class="w1 borderGray flex flexCenter alignCenter" :class="{' colorGreen':subTotal.thisMonthLiftRate<0,'colorRed':subTotal.thisMonthLiftRate > 0}">{{subTotal.thisMonthLiftRateText}}</div>
                    <div v-if="areaId!=20" class="w1 borderGray flex flexCenter alignCenter">{{subTotal.thisDayPreSales}}</div>
                </div> -->
                <div class="colorBlue fontbold fontSize13" v-if="typeVal==1" style="display: -webkit-box">
                    <div class="disInline w20 borderGray regionName flex flexCenter alignCenter">{{subTotal.name}}</div>
                    <div class="disInline w20 borderGray flex flexCenter alignCenter" v-if='areaId==20'>{{subTotal.thisNetSales}}</div>
                    <div class="disInline w20 borderGray flex flexCenter alignCenter">{{subTotal.thisDaySales}}</div>
                    <div class="disInline w20 borderGray flex flexCenter alignCenter">{{subTotal.thisMonthSales}}</div>
                    
                    <div class="disInline w20 borderGray flex flexCenter alignCenter">{{subTotal.lastYearThisMonthSales}}</div>
                    <div class="disInline w20 borderGray flex flexCenter alignCenter" :class="{' colorGreen':subTotal.thisMonthLiftRate<0,'colorRed':subTotal.thisMonthLiftRate > 0}">{{subTotal.thisMonthLiftRateText}}</div>
                    <div v-if="areaId!=20" class="disInline w20 borderGray flex flexCenter alignCenter">{{subTotal.thisDayPreSales}}</div>
                </div>
                <!--vip列表-->
                <div class="reportListContent fontSize13" v-if="typeVal==2">
                    <div class="flex center" v-for="(item,index) in reportList" :key="index">
                        <div class="flex1 borderGray regionName flex flexCenter alignCenter fontSize13 center">{{item.name}}</div>
                        <div class="w24 borderGray flex flexCenter alignCenter">{{item.thisMonthConsumersNumber}}</div>
                        <div class="w24 borderGray flex flexCenter alignCenter">{{item.thisYearConsumersNumber}}</div>
                    </div>
                </div>
                <!--vip小计-->
                <div class="flex  flexCenter colorBlue fontbold fontSize14" v-if="typeVal==2">
                    <div class="flex1 borderGray flex flexCenter alignCenter regionName">{{subTotal.name}}</div>
                    <div class="w24 borderGray flex flexCenter alignCenter">{{subTotal.thisMonthConsumersNumber}}</div>
                    <div class="w24 borderGray flex flexCenter alignCenter">{{subTotal.thisYearConsumersNumber}}</div>
                </div> 
        </div>
        <!-- <div class="mainTable">
            <table cellspacing="0">
                <thead>
                    <tr class="tableTitleBgcolor colorfff fontSize12">
                        <th class="tableTitleBgcolor">区域名称</th>
                        <th class="tableTitleBgcolor" @click="goSort(netSalesSort,'thisNetSales')" v-if="areaId==20">
                            当天净销额(万)
                        </th>
                        <th class="tableTitleBgcolor" @click="goSort(daySort,'thisDaySales')">
                            当天销售额(元)
                        </th>
                        
                        <th class="tableTitleBgcolor" @click="goSort(monthSort,'thisMonthSales')">
                            月累销售额(元)
                        </th>
                        
                        <th style="background-color: #85aaee" @click="goSort(monthSort,'lastYearThisMonthSales')">
                            同期月累销售额(元)
                        </th>
                        <th style="background-color: #85aaee" @click="goSort(monthLiftSort,'thisMonthLiftRate')">
                        月累同期提升比
                        </th>
                        <th  v-if="areaId!=20" style="background-color: #85aaee">
                            预售(元)
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in reportList" :key="index">
                        <td>{{item.name}}</td>
                        <td v-if="areaId==20">{{item.thisNetSales}}</td>
                        <td>{{item.thisDaySales}}</td>
                        <td>{{item.thisMonthSales}}</td>
                        <td>{{item.lastYearThisMonthSales}}</td>
                        <td :class="{'colorGreen':item.thisMonthLiftRate<0,'colorRed':item.thisMonthLiftRate > 0}">{{item.thisMonthLiftRateText===''?'-':item.thisMonthLiftRateText}}</td>
                        <td v-if="areaId!=20">{{item.thisDayPreSales}}</td>
                    </tr>
                </tbody>
            </table>
        </div> -->
        <div class="center color999" style="margin-top:2rem" v-if="reportList.length==0">暂无数据~</div>
        <van-calendar v-model="show" @confirm="onConfirmDate" color="#4873c1" :min-date="minDate" :max-date="maxDate"/>
    </div>
</template>
<script>
import { Toast} from 'vant'
import {GetQueryStr} from '@/common/common.js'
export default{
    data(){
        return{
            brandVal:1,
            brandList:[],
            typeVal:1,
            option: [
                { text: '销售额', value: 1 },
                { text: 'vip', value: 2 },
            ],
            dateVal:'',
            dateList:[],
            nowDate:'',
            reportList:[],
            // reportList:{
            //     list:[],
            //     total:{}
            // },
            show:false,
            minDate: '',
            maxDate: '',
            brandId:'',
            subTotal:{},
            brandName:'',
            areaId:'',
            bigAreaId:'',
            isLoading:true,
            netSalesSort:1,
            daySort:1,
            monthSort:1,
            monthLiftSort:1
        }
    },
    created(){
        let parm=this.$route.query
        console.log('parm',parm)
        this.bigAreaId=parm.bigAreaId
        this.nowDate=parm.date
        this.brandName=parm.brandName
        parm.areaId?this.areaId=parm.areaId:''
        //时间
        var date=new Date()
        var preDate=new Date(date.getTime() - (24*60*60*1000))
        let year=preDate.getFullYear()
        let month=preDate.getMonth() + 1
        let day= preDate.getDate()

        month<10?month='0'+month: ''
        day<10?day='0'+day: ''
        //this.nowDate=parm.date
        let obj={
            text: this.nowDate, value: +parm.day
        }
        this.dateVal= +parm.day
        this.dateList=[obj]
        this.minDate=new Date(2021, month, day)
        this.maxDate=new Date(year, preDate.getMonth(), day)
        // this.minDate=new Date(2021, parm.month, this.dateVal)
        // this.maxDate=new Date(year, preDate.getMonth(), this.dateVal)

        // let obj={
        //     text: this.nowDate, value: parm.day
        // }
        // this.dateVal=parm.day
        // this.dateList=[obj]
        // this.minDate=new Date(2021, parm.month, parm.day)
        // this.maxDate=new Date(year, preDate.getMonth(), parm.day)
        //token
        let token=GetQueryStr('token')
        if(token&&token!==''){
            localStorage.setItem('token',token)
        }
        this.brandId= parm.id
        this.getAreaInfo(1,'thisMonthLiftRate')
        if(this.areaId==20){
            document.title='线上销售报表'
        }
        // this.getBrandHasArea()
        // this.getBrandList()        
    },
    methods:{
        getAreaInfo(type,name){
            if(this.isLoading){
                Toast.loading({
                    message: '加载中',
                    forbidClick: true,
                    duration:0
                })
            }
            let obj={brandId:this.brandId,date:this.nowDate,areaId:this.areaId,bigAreaId:this.bigAreaId,sort_way:type,sort_field:name}
            this.daySort==1?this.daySort=2:this.daySort=1
            this.monthSort==1?this.monthSort=2:this.monthSort=1
            this.monthLiftSort==1?this.monthLiftSort=2:this.monthLiftSort=1  
            this.netSalesSort==1?this.netSalesSort=2:this.netSalesSort=1
            console.log('提交data',obj)
            this.$apiRequest.getAreaInfo(obj).then(res=>{
                console.log('门店明细',res)
                if(res.code==1){
                    this.subTotal=res.data.pop()
                    this.reportList=res.data
                    //document.title=to.meta.title
                }
                Toast.clear()
            })
        },
        
        getChangeDrop(e){
            console.log('下拉',e)
            this.brandVal=e
            // this.getDayReportByRegion()
        },
        getType(e){
            // console.log('下拉啦啦啦',e)
            this.typeVal=e
        },
        goOpen(){
            this.show=true
        },
        onConfirmDate(date){
            console.log('date',date)
            // console
            this.show=false
            let month=date.getMonth() + 1
            let day=date.getDate()
            month<10?month='0'+month: ''
            day<10?day='0'+day: ''
            let activeDate=`${date.getFullYear()}-${month}-${day}`
            this.dateList=[{text:activeDate,value:date.getDate()}]
            this.dateVal=date.getDate()
            this.nowDate=activeDate
            this.getAreaInfo()
            // this.getDayReportByRegion()
        },
        goSort(type,name){
            this.isLoading=false
            this.getAreaInfo(type,name)
        }
    }
}

</script>
<style >
.dayReport1 .van-overlay{
    background-color: rgba(0, 0, 0, 0.9)
}
</style>
<style lang='less' scoped>
.w14{
    // width: 13%;
    width: 1.4rem;
    padding: 0.14rem 0;
    text-align: center;
    // height: 0.9rem;
    // line-height: 0.6rem;
    // border: 1px #777 solid;
}
.w1{width: 1rem;}
.w20{
    width: 2.2rem;
    padding: 0.2rem 0.04rem;
    
}
.w24{
    width: 2rem !important;
    padding: 0.14rem 0;
    text-align: center;
}
.w17{
    width: 1.7rem;
}
.reportListContent{
    // max-height:6rem;
    // overflow-y: scroll;
    .regionName{
        background-color: #f1f1f1;
        white-space: pre-wrap
    }
}
.contenter{
    width: 92%;
    margin: 0 auto;
    .title{
        background-color: rgba(83,114,192,0.1);
        padding: 0.1rem 0;
    }
    .mainContent{
        // padding-bottom: 0.8rem;
    }
    .subTitle{
        // height: 1rem;
        background-color: #85aaee;
        // display: block;
        // padding: 0.1rem 0;
        .w14{
            height: 1rem;
            // line-height: 0.76rem;
        }
    }
    .Subtotal{
        background: #fdebe8;
        position: fixed;
        width: 92%;
        bottom: 0.48rem;
        left: 50%;
        z-index: 1;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
}
.reportListContent {
    max-height: 10rem;
    overflow-y: auto;
}
.contentlayout{
    overflow-x: auto;
    display: block;
}
.borderGray{
    // background-color: #85aaee;
    // padding: 0.1rem 0;
    border:1px #eee solid
}
.borderBlue{
    border:1px #83a6e7 solid
}
.mainTable{
    overflow:auto;
    height: 9rem;
    td,th{
        // border:1px solid gray;
        width:100px;
        height:40px;
        border:1px #eee solid;
        text-align: center;
    }
    th{
        position: relative;
        z-index: 999;
    }
    table{
        table-layout:fixed;
        width:900px;
    }
    td:first-child,th:first-child{
        position:sticky;
        left:0;
        z-index:1;
        // background-color:lightpink;
    }
    thead tr th{
        position:sticky;
        top:0;
    }
    td:first-child{
        background-color: #f1f1f1;
        z-index: 1;
    }
    th:first-child{
        z-index:999999;
        // background-color:lightblue;
    }
}
</style>
